<template>
	<div class="padding-across-10" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
		<headerOpreate style="width: 45%;padding: 5px 0" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<!--区域列表-->
		<div class="district-tree">
			<el-tree :show-overflow-tooltip="true" ref="tree" :data="tableData" :props="defaultProps" node-key="DistrictKeyId" :default-expanded-keys="defaultKey" :expand-on-click-node="true" :render-content="renderContent" :check-strictly="true">
			</el-tree>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { HttpServer, GloabFun } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'

	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				isReload: false,
				loading: false,
				opreateDatas: [{
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				}
				],
				defaultProps: {
					children: 'Children',
					label: 'Name',
					id: 'Id'
				},
				tableData: [],
				defaultKey: []
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			renderContent(h, node) {
				// console.log(h)
				if(node.data.Children.length > 0) {
					return h('span', {
						attrs: {
							class: "clearfloat",
							style: 'width:100%;display:inline-block'
						}
					}, [h('i', {
						attrs: {
							class: ""
						}
					}),
					node.data.Name,

					h('span', {
						attrs: {
							style: 'float:right;text-align:right;margin-right:30px'
						}
					}, [
					h('el-button', {
							on: {
									click: this.readerList(node.data)
								},
								attrs: {
									type: 'primary',
									size: 'small'
								}
							}, [h('i', {
								attrs: {
									style: 'font-size:13px;',
									class: "el-icon-eleg-icon_group el-icon--left"
								}
							}), '读者管理']),
					h('el-button', {
						on: {
									click: this.bookList(node.data)
								},
								attrs: {
									type: 'primary',
									size: 'small'
								}
							}, [h('i', {
								attrs: {
									style: 'font-size:13px;',
									class: "el-icon-eleg-icon_book el-icon--left"
								}
							}), '图书管理'])
					])
					]);
				} else {
					return h('span', {
						attrs: {
							class: "clearfloat",
							style: 'width:100%;display:inline-block'
						}
					}, [h('i', {
						attrs: {
							class: ""
						}
					}),
					node.data.Name,

					h('span', {
						attrs: {
							style: 'float:right;text-align:right;margin-right:30px'
						}
					}, [
					h('el-button', {
							on: {
									click: this.readerList(node.data)
								},
								attrs: {
									type: 'primary',
									size: 'small'
								}
							}, [h('i', {
								attrs: {
									style: 'font-size:13px;',
									class: "el-icon-eleg-icon_group el-icon--left"
								}
							}), '读者管理']),
					h('el-button', {
							on: {
									click: this.bookList(node.data)
								},
								attrs: {
									type: 'primary',
									size: 'small'
								}
							}, [h('i', {
								attrs: {
									style: 'font-size:13px;',
									class: "el-icon-eleg-icon_book el-icon--left"
								}
							}), '图书管理'])
					])

					]);
				}
			},
			//前往绑定读者页面
			readerList(node) {
				return function() {
					this.$emit('changeView', 'DistrictReaderList', {Name: node.Name, DistrictKeyId: node.DistrictKeyId});
				}.bind(this)
			},
			//前往绑定图书页面
			bookList(node) {
				return function() {
					this.$emit('changeView', 'DistrictBookList', {Name: node.Name, DistrictKeyId: node.DistrictKeyId});
				}.bind(this)
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();                                                                         
			},
			getDatas() {
				this.loading = true;
				HttpServer.httpGet.call(this, '/Api/District/districtTree?uid=' + parseInt(GloabFun.getKeyId()), function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						if(response.data.info.length > 0) {
							// console.log(response)
							this.tableData = response.data.info;
							this.defaultKey = [response.data.info[0].DistrictKeyId];
							if(this.isReload){
								this.$notify({
									title: '成功',
									message: this.$t('message.refreshSuccess'),
									type: 'success',
									duration: 2500
								});
							}
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>

<style>
	.district-tree .el-tree-node__children {
		width: 100%;
	}
</style>
<style scoped lang="less">
	.color-item {
		border: none;
		color: #fff;
		text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
		cursor: move;
		text-align: center;
		height: 25px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		margin: 5px 20px;
		display: block;
		background: #4a5e6f;
		text-align: center;
		line-height: 25px;
		// box-shadow:inset 0 1px 0 #617586,inset 0 0 40px 5px rgba(0,0,0,.3),0 0 2px 1px rgba(0,0,0,.5);
	}
	
	.color-item:hover {
		position: relative;
		top: 1px;
		box-shadow: inset 0 -1px 0 #617586, inset 0 2px 8px rgba(0, 0, 0, .5), inset 0 0 40px 5px rgba(0, 0, 0, .25)/*,0 0 2px 1px rgba(0,0,0,.5)*/
		;
		color: #fff;
	}
	
	.table-icon {
		color: #20a0ff;
		font-size: 20px;
		font-weight: bold;
		padding: 5px 0;
	}
</style>